<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 连起来就不会是#text -->
    <p id="para"><span>First span</span><b>First Bold</b></p>

    <button type="button" onclick="myFunc()">点我试试</button>
    <p id="para2">
      <span>First span</span>
      <b>First Bold</b>
    </p>

    <button type="button" onclick="myFunc2()">点我试试</button>
    <button onclick="myFunc3()">点我试试</button>
    <br /><br />

    <div style="border: 1px solid">
      <p>这是DIV中的第一个P</p>

      <p id="para3" style="background: lightgreen">这是DIV中的第二个P</p>

      <p>这是DIV中的第三个P</p>
    </div>
    <p>单击按钮可获得" DIV-2"元素的上一个和下一个同级:</p>

    <div id="div-1">这里是div-1</div>

    <div id="div-2">这里是div-2</div>

    <div id="div-3">这里是div-3</div>
    <button onclick="myFunc4()">点我试试</button>
    <button onclick="myFunc5()">点我试试</button>

    <p>Hello, World!</p>

    <div>
      <p>DOM根节点</p>
      <p>document.body属性设置或返回文档的body元素。</p>
    </div>
    <p id="myPara">单击按钮以获取该元素的节点类型。</p>

    <button onclick="myFunc6()">点我试试</button>

    <p id="result"></p>
    <script>
      //访问子节点
      function myFunc() {
        var para = document.getElementById("para");
        alert(para.firstChild.nodeName);
        alert(para.childNodes[0].nodeName);
        alert(para.lastChild.nodeName);
      }

      //为了避免出现#text或#comment节点 可以使用以下:
      function myFunc2() {
        var para2 = document.getElementById("para2");
        alert(para2.firstElementChild.nodeName); // returns SPAN
      }

      //访问父节点
      function myFunc3() {
        var para3 = document.getElementById("para3");
        alert(para3.parentNode.nodeName);
      }

      //访问兄弟节点
      function myFunc4() {
        var x = document.querySelector("#div-2");
        alert(x.previousSibling.nodeName);
        alert(x.nextSibling.nodeName);
      }

      function myFunc5() {
        var x = document.querySelector("#div-2");
        alert(x.previousElementSibling.textContent);
        alert(x.nextElementSibling.textContent);
      }

      //访问根节点
      alert(document.body.innerHTML);

      //NodeTyle属性
      function myFunc6() {
        var x = document.getElementById("myPara").nodeType;
        document.getElementById("result").innerHTML = x;
      }
    </script>
    <p>
      <b>注意:</b>在上面的示例中，输出将为"
      #text"，因为插入了一个文本节点以保持标记之间的空白。
      任何空白都会创建一个#text节点，从单个空格到多个空格，返回，制表符等。
    </p>
  </body>
</html>
